<template>
        <DIV class="bg_write" v-loading="loading">
        <el-col :span="24" class="content_title">
          <el-col :span="12">
              <HeadTitle></HeadTitle>
            </el-col>
        </el-col> 

        <el-col :span="24" class="pd_20">
            <el-table
            ref="multipleTable"
            :data="list.data"
            stripe  
            header-row-class-name="head_color"     
            tooltip-effect="dark"
            style="width: 99.9%"
            @selection-change="handleSelectionChange"
            >

            <el-table-column
            type="selection"
            class="tc"
            width="35" 
            >
            </el-table-column>
                   
            <el-table-column
            label="订单号"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.oid }}</template>
            </el-table-column>

            <el-table-column
            label="申请会员"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.username }}</template>
            </el-table-column>

            <el-table-column
            label="会员昵称"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.nickname }} </template>
            </el-table-column>
           
            <el-table-column
            label="申请金额"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.money | keepTwoNum }} {{scope.row.style_cn}} </template>
            </el-table-column>

            <el-table-column
            label="实提金额"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.real_money | keepTwoNum }} {{scope.row.style_cn}} </template>
            </el-table-column>

            <el-table-column
            label="申请时间"
            min-width="100"
            >
            <template slot-scope="scope">{{ scope.row.created_time | getTimeFormat  }}</template>
            </el-table-column>
            
            <el-table-column
            label="提现方式"
            min-width="100"
            >
            <template slot-scope="scope">{{ scope.row.pay }}</template>
            </el-table-column>

            <el-table-column
            label="申请状态"
            min-width="100">
            <template slot-scope="scope">{{ scope.row.status_cn }} </template>
            </el-table-column>         
           
            <el-table-column
            label="操作"
            min-width="100">
            <template slot-scope="scope">
                <el-button  :loading='$store.state.isLoading' size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button>

            </template>
            </el-table-column>

        </el-table>
        

        <el-col :span="24" class="table_bottom">
            <el-col :span="4" class="tl">
                <a class="aBtn aBtn_1 aBtn_lan2" @click="allowSelection()">批量通过</a>
                <a class="aBtn aBtn_1 aBtn_lan2" @click="rejectSelection()">批量驳回</a>
            </el-col> 

            <el-col :span="20" class="tr">
            <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                         layout="total, sizes, prev, pager, next, jumper"
                        :total="list.all_num">
                </el-pagination>
            </el-col>
        </el-col>
</el-col>


    
    <WithdrawJfEdit  @parent="reload" :show.sync="show" :editId="editId" :clickNum="clickNum"></WithdrawJfEdit>

    <el-dialog  :close-on-click-modal='false' title="提现积分"  :modal-append-to-body="false" :visible.sync="visible"   class="tl size_13" width="800px">                                                                    
                    <DIV v-for="(item,i) in arr"  :key="i">
                       <br> {{item}}    <br> 
                    </DIV>                    
                <div class="mar_bottom_15">                 
                </div>             
    </el-dialog>    

    </DIV>

    
</template>
<script>

import switchc from "../currency/Swich";
import WithdrawJfEdit from "@/components/user/withdraw_jf_edit.vue"
import HeadTitle from "@/components/currency/HeadTitle.vue"

export default {
    data() {
        return {
        show:false,
        loading:false,
        list: [],
        allPage: 0,
        allNum: 0,
        pageSize: 10,
        currentPage:1,
        editId:'',
        multipleSelection:'',
        arr:[],
        visible:false,
        clickNum: 0,
        updataIndex:''
        };
    },
    components: {
        switchc,
        WithdrawJfEdit,
        HeadTitle,
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;   
        },
        allowSelection(){         
            this.arr = [];
            if(this.multipleSelection.length == 0){
                return false;
            }
            this.visible=true; 
            
            for(var i=0; i<this.multipleSelection.length; i++){
                var data = {id:this.multipleSelection[i]['id']};
                    this.$api.getUser.getWithdrawJfAllow(data).then(res => { 
                    this.arr.push(res.data.result);  
                    });                    
            }
            var aa = this;
            window.setTimeout(function(){
                aa.getNewsAll();   
            },1000);       
        },
        rejectSelection(){
            this.arr = [];
            if(this.multipleSelection.length == 0){
                return false;
            }
            this.visible=true; 
            var _this=this;
            for(var i=0; i<this.multipleSelection.length; i++){
                var data = {id:this.multipleSelection[i]['id']};
                    _this.updataIndex=i;
                this.$api.getUser.getWithdrawJfReject(data).then(res => { 
                this.arr.push(res.data.result);  
                        console.log(_this.updataIndex)
                });                    
            }

            var aa = this;
            window.setTimeout(function(){
                aa.getNewsAll();   
            },1000);
                
        },
        showEditDialog(id){
        this.show = true;
        this.editId=id;
        this.clickNum ++;
        },
        reload(id){
          this.getNewsAll(this.searchAll);
        },
        getNewsAll(page,page_size) {
            page =page || 1;
            page_size = page_size || 10;
            var data = { cate_id:"",page:page,page_size:page_size};

            this.$api.getUser.getWithdrawJfList(data).then(res => {
            if (res.data.code==200) {
                this.list=res.data.result;
            }
            });
	    },
        handleSizeChange(val) {
            this.getNewsAll("",val)
            this.pageSize=val
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
                  this.currentPage = val;
            this.getNewsAll(val,this.pageSize)
        },
    },
    beforeCreate(){
        this.loading=true; //数据未加载之前调用loading
    },
    created() {
        this.getNewsAll();
        this.loading=false;
    },
    computed: {
        
    },
    watch: {
        arr(){
            console.log('批量操作',this.arr);
        }
    }
};
</script>

<style lang="less" scoped>

thead > tr > th {
  height: 45px;
  line-height: 45px;
}
td,
th {
  border: 1px solid #e1e3e4;
  font-size: 12Px;
}
th {
  background: #f8f8f8;
  font-weight: normal;
  color: #323437;
}
td {
  height: 75px;
  color: #000;
}
.caozuo {
  padding-left: 50px;
}
.pl {
  padding-left: 15px;
}
.chkBox {
  display: block;
  margin: 0 auto;
  width: 18px;
  height: 18px;
  background: #fff;
}
.aBtn_1 {
  padding: 10px;
}
</style>
